<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/plugin-element/plugin-element.html">
<link rel="import" href="../bower_components/plugin-element/plugin-xhr.html">
<link rel="import" href="../bower_components/plugin-element/plugin-message.html">
<link rel="import" href="../bower_components/plugin-element/plugin-payment.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="../bower_components/paper-item/paper-item-body.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="shop-common-styles.html">
<dom-module id="shop-my-trades">
    <template>
        <style include="shop-common-styles">
            paper-icon-item:first-of-type{
                border-top: #ccc dotted 1px;
            }
            paper-icon-item{
                position: relative;
                border-bottom: #ccc dotted 1px;
            }
            paper-icon-item a{
                display: block;
            }
            paper-icon-item a[slot=item-icon]{
                width: 50px;
                height: 50px;
            }
            paper-item-body a[secondary]{
                font-size: 12px;
            }
            paper-listbox paper-button{
                margin: 0px;
                background-color: #003366;
                color: white;
                font-size: 12px;
                border-radius:0px;
                min-width: auto;
                width: 40px;
                height: 40px;
            }
            paper-listbox paper-button.trade-close{
                background-color: #eee;
                color: #000;
            }
            paper-listbox a{
                color: #000;
                text-decoration: none;
            }
        </style>
        <plugin-message id="msg"></plugin-message>
        <plugin-xhr id="xhr_my_trade_list" url="[[app.apiHost]]/my.trade.list" response="{{trades}}"></plugin-xhr>
        <plugin-xhr id="xhr_trade_close" url="[[app.apiHost]]/my.trade.close"></plugin-xhr>
        <template is="dom-if" if="[[trades]]">
            <header>
                <h1>我的订单</h1>
                <span hidden="[[isEmpty]]">总计[[trades.result.length]]个订单</span>
                <span hidden="[[!isEmpty]]">您当前没有任何订单</span>
            </header>
        </template>
        <paper-listbox>
            <template is="dom-repeat" items="[[trades.result]]" as="trade">
                    <paper-icon-item>
                        <a href="/my-trade?id=[[trade.id]]" slot="item-icon"><img src="[[trade.pic]]?imageView2/5/w/50/h/50"/></a>
                        <paper-item-body two-line>
                            <a href="/my-trade?id=[[trade.id]]">[[trade.title]]</a>
                            <a href="/my-trade?id=[[trade.id]]" secondary>共[[trade.product_count]]件商品，总额￥[[trade.pay_amount]]</a>
                        </paper-item-body>
                        <template is="dom-if" if="[[!trade.paymented]]">
                            <plugin-payment on-success="_paymentSuccess" trade-id="[[trade.id]]">
                                <paper-button slot="button">付款</paper-button>
                            </plugin-payment>
                            <paper-button class="trade-close" on-click="_closeTrade">关闭</paper-button>
                        </template>
                    </paper-icon-item>
                
            </template>
        </paper-listbox>
    </template>

    <script>
        class ShopMyTrades extends PluginElement {

            static get is() {
                return 'shop-my-trades';
            }

            static get properties() {
                return {
                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    },
                    isEmpty:{
                        type:Boolean,
                        value:true
                    },
                    trades:{
                        type:Object,
                        observer:"_tradesChanged"
                    }
                }
            }
            _visibleChanged(visible) {
                let dom = this;
                if(visible){
                   this.$.xhr_my_trade_list.param("app_id",app.appId).get();
                }
            }
            _closeTrade(e){
                let dom = this;
                this.$.msg._confirm("是否确认关闭订单："+e.model.trade.title,function(){
                    dom.$.xhr_trade_close.param("trade_id",e.model.trade.id).callback(function(){
                        dom.splice("trades.result",dom.trades.result.indexOf(e.model.trade),1);
                    }).get();
                });
            }
            _paymentSuccess(e){
                this.set("trades.result."+this.trades.result.indexOf(e.model.trade)+".paymented",true);
            }
            _tradesChanged(trades){
                if(trades){
                   if(trades.result.length>0){
                       this.isEmpty = false;
                   }
                } 
            }
        }

        customElements.define(ShopMyTrades.is, ShopMyTrades);

    </script>

</dom-module>
